//获取商品详情数据
window.onload = function() {
    //获取URL的数据
    //将搜索url根据字符串分割为数组
    let url = location.search.split('?pid=');
    // console.log(url);
    let pid = url[1];

    ajax({
        url: '/pro/detail',
        type: 'get',
        data: pid,
        success: function(data) {
            // 获取数据，将数据给对应的元素
            data = JSON.parse(data)[0];
            img_m.src = img_x.src = img_s1.src = data.img1;
            pname.innerHTML = data.pname;
            pname.dataset.pid = data.pid;
            price.innerHTML = data.price;
            type.innerHTML = data.type;
            img_s2.src = data.img2;
            img_s3.src = data.img3;
        },
        error: function(e) {
            console.log(e);
        }
    });
}


//按钮加减
let top_2 = document.getElementsByClassName("top_2")[0];
// console.log(top_2);
let but = top_2.getElementsByTagName("button");
// console.log(but);
for (let anniu of but) {
    // console.log(anniu);
    anniu.onclick = function() {
        let span = this.parentElement.children[1];
        // console.log(span);
        let n = parseInt(span.innerHTML);
        if (this.innerHTML == "+") {
            n++;
        } else if (n > 1) {
            n--;
        }
        span.innerHTML = n;
    }
}

//鼠标移动小图片替换中大图片
// 大图
let bigImg = document.querySelector('.top>.big>img');
// 中图
let img = document.querySelector(".top>.ty>img");
// 小图列表
let detail2 = document.querySelectorAll('.detail_2>div>a>img');
for (let detail of detail2) {
    //为每张小图添加鼠标移入事件
    detail.onmouseover = function() {
        //将中图和大图的路径改为当前移入小图的路径
        img.src = this.src;
        bigImg.src = this.src;
        //且为元素添加选中事件
        this.parentElement.parentElement.classList.add('active');
    }
    detail.onmouseout = function() {
        this.parentElement.parentElement.classList.remove('active');
    }
}


//鼠标移动中图片显示遮罩和大图片框
//放大镜div
let box = document.querySelector('.top');
//中图div
let small = document.querySelector('.top>.ty');
// console.log(small);
//大图div
let big = document.querySelector('.top>.big');
// console.log(big);
//遮罩层
let mask = small.children[1];
// console.log(mask);

//big和mask在鼠标移入small时显示，移出时隐藏
small.onmouseenter = function() {
    big.style.display = "block";
    mask.style.display = "block";
};
small.onmouseleave = function() {
    big.style.display = "none";
    mask.style.display = "none";
};

small.onmousemove = function(event) {
    event = event || window.event;
    // console.log(event);
    //mask跟随鼠标移动，且不会超出small范围
    //获取当前鼠标在窗口的位置
    var pagex = event.pageX || scroll().left + event.clientX;
    var pagey = event.pageY || scroll().top + event.clientY;

    //减去div.top左上角距离窗口的距离
    //减去mask宽高的一半，让鼠标在mask的中间
    //x作为mask的left值，y作mask的top值。
    var x = pagex - box.getBoundingClientRect().x - mask.offsetWidth / 2;
    var y = pagey - box.getBoundingClientRect().y - mask.offsetHeight / 2;

    //不让mask超出small
    if (x < 0) {
        x = 0;
    }
    // small的宽度减去mask的宽度为mask移动的最大值
    if (x > small.offsetWidth - mask.offsetWidth) {
        x = small.offsetWidth - mask.offsetWidth;
    }
    if (y < 0) {
        y = 0;
    }
    if (y > small.offsetHeight - mask.offsetHeight) {
        y = small.offsetHeight - mask.offsetHeight;
    }

    //将x，y给mask，进行偏移
    mask.style.left = x + "px";
    mask.style.top = y + "px";

    //bigImg随着mask的移动移动
    //比例 = 大图移动的距离/mask移动的距离 = 大图长度/小图长度
    var scale = bigImg.offsetWidth / small.offsetWidth;

    bigImg.style.marginLeft = -scale * x + "px";
    bigImg.style.marginTop = -scale * y + "px";
}

//购物车数据库
function save_cart() {
    //获取保存的uid
    let uid = localStorage.getItem('uid');
    if(uid){
        let pid = pname.dataset.pid;
        let pnum = document.getElementById('pnum').innerHTML;
        let str = `pid=${pid}&pnum=${pnum}&uid=${uid}`;
    
        ajax({
            url: '/pro/cart',
            type: 'post',
            data: str,
            success: function(data) {
                if (confirm('加入购物车成功，是否去购物车付款')) {
                    location.href = '/cart.html';
                }else{
                    location.reload();
                } 
            },
            error: function(e) {
                console.log(e);
            }
        });
    }else{
        alert('未登录，无法添加商品到购物车');
        location.href = '/cart.html';
    }
    
}